<template>
  <div class="aside">
    <el-container class="main">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['0', '3']">
          <el-menu-item>
            <el-icon>
              <House/>
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="0">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>用户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="0-1" @click="handleUser"
              >用户列表
              </el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Reading/>
              </el-icon>
              <span>植物信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="handlePlant"
              >植物信息
              </el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-2" @click="handlePlantName"
              >植物名称
              </el-menu-item
              >
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="1-3" @click="handlePlantCrop">植物种类</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Reading/>
              </el-icon>
              <span>植物信息审核</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="handleArticle"
              >信息审核
              </el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item @click="handleOut">
            <el-icon>
              <SwitchButton/>
            </el-icon>
            <span>退出</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="background-color: rgb(228, 228, 222)">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import UsersList from "@/views/admin/user/UsersList";
import {ElMessageBox} from "element-plus";
import {removeToken} from "@/utils/auth";

export default {
  name: "Aside",
  comments: {
    UsersList
  },
  methods: {
    handleUser() {
      this.$router.push("/admin/usersList");
    },
    handlePlant() {
      this.$router.push("/admin/plant");
    },
    handlePlantName() {
      this.$router.push("/admin/PlantCropRelation");
    },
    handleArticle() {
      this.$router.push("/admin/article");
    },
    handlePlantCrop() {
      this.$router.push('/admin/PlantCrop')
    },
    handleOut() {
      ElMessageBox.confirm("退出登陆后需要重新登录,是否继续?", "提示", {
        confirmButtonText: "退出",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeToken();
        this.$router.push("/index");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  height: 900px;
  border: 1px solid #eee;
}
</style>
